<template>
  <view class="container">
    <header @click="$goPath(1)">
      <image src='/static/images/right-white.png' mode='aspectFit|aspectFill|widthFix' alt="" />
      <view>编辑个人资料</view>
    </header>
    <section>
      <view class="sect-box">
        <view class="sect-avatarImg">
          <view>头像</view>
          <u-upload action="https://youpindou.com:8083/doudougou/image/upload" @afterRead="afterReadUpload" :maxCount="1">
            <image class="avatarImg-img" :src='avatarImg' mode='aspectFit | aspectFill | widthFix'
              v-if="avatarImg != ''" />
            <view class="avatarImg-upload" v-else>
              <u-icon size="18" name="plus" color="#999999"></u-icon>
            </view>
          </u-upload>
        </view>
        <u-form labelPosition="left" ref="uForm" labelWidth="55">
          <u-form-item label="昵称" prop="username" borderBottom>
            <u--input v-model="username" border="none" />
          </u-form-item>

          <u-form-item label="性别" prop="gender" borderBottom>
            <u-radio-group v-model="gender">
              <u-radio :name="1" label="男" activeColor="#32B499"></u-radio>
              <u-radio :name="2" label="女" style="margin-left: 12px;" activeColor="#32B499"></u-radio>
            </u-radio-group>
          </u-form-item>

          <u-form-item label="手机号" prop="phone" borderBottom>
            <u--input v-model="phone" border="none" style="font-family: 'DIN-Regular';" />
          </u-form-item>

          <u-form-item label="生日" prop="birthday" borderBottom>
            <input v-model="birthday" @click="show = true" @focus="show = true" style="font-family: 'DIN-Regular';" />
            <u-datetime-picker :show="show" v-model="datetimeValue" mode="date" confirmColor="#32B499"
              @cancel="show = false" @confirm="handleConfirm"></u-datetime-picker>
          </u-form-item>

          <view class="sect-btn">
            <view @click="handleSubmit">提交</view>
          </view>
        </u-form>
      </view>
    </section>
  </view>
</template>
<script>

export default {
  data() {
    return {
      userInfo: {},
      avatarImg: '',
      username: '',
      phone: '',
      gender: '',
      birthday: '',
      show: false,
      datetimeValue: Number(new Date()),
    }
  },

  methods: {
    //上传头像
    async afterReadUpload(event) {
      let result = await this.$tools.uploadImage(event.file.url)
      this.avatarImg = result.data
    },

    //选择日期
    handleConfirm(e) {
      const timeFormat = uni.$u.timeFormat
      this.birthday = timeFormat(e.value, 'yyyy-mm-dd');
      this.show = false;
    },

    //提交
    handleSubmit() {
      const { avatarImg, username, phone, gender, birthday, userInfo } = this;
      const param = {
        avatar: avatarImg,
        username,
        phone,
        gender,
        userId: userInfo.userId,
        birthday,
      }

      this.$request.userEditInformation(param).then(res => {
        if (res.code == 200 && res.isSuccess) {
          this.$toast('修改成功!')
          setTimeout(() => {
            this.$goPath(1)
          }, 800)
        } else {
          this.$toast('修改失败!')
        }
      });
    },
  },

  onLoad(options) {
    let userDetail = JSON.parse(decodeURIComponent(options.userDetail));
    this.userInfo = userDetail;
    this.username = userDetail.username;
    this.phone = userDetail.phone;
    this.avatarImg = userDetail.avatar;
    this.birthday = userDetail.birthday;
    if (userDetail.birthday) {
      this.datetimeValue = Number(new Date(userDetail.birthday));
    } else {
      this.datetimeValue = Number(new Date());
    };
    this.gender = userDetail.gender;
  },
}
</script>

<style  scoped>
.container {
  width: 100%;
  height: 100vh;
  font-size: 14px;
  font-family: 'PingFang SC-Medium';
  background-color: #FED14E;
  overflow-y: hidden;
}

header {
  width: 100%;
  padding: 40px 12px;
  border-radius: 0 0 20px 20px;
  box-sizing: border-box;
  color: #fff;
  background-color: #32B499;
  background-image: url('https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/homeTopIcon.png');
  background-size: 100% auto;
  background-repeat: no-repeat;
  font-size: 18px;
  font-family: 'PingFang SC-Bold';
  display: flex;
  align-items: center;
}

header>image {
  width: 16rpx;
  height: 28rpx;
  display: block;
  margin-right: 12rpx;
}

section {
  height: 100%;
  position: relative;
  top: -25px;
  padding: 0 12px;
  box-sizing: border-box;
}

.sect-box {
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 20px 20px 0 0;
  padding: 12px;
  padding-bottom: 75px;
  box-sizing: border-box;
}

.sect-avatarImg {
  padding: 10px 0;
  border-bottom: 1px solid rgb(214, 215, 217, 0.5);
  border-top-color: rgb(214, 215, 217);
  border-right-color: rgb(214, 215, 217);
  border-left-color: rgb(214, 215, 217);
  display: flex;
  align-items: center;
}

.sect-avatarImg>view:first-child {
  width: 45px;
  padding-right: 5px;
  box-sizing: border-box;
}

.avatarImg-img {
  width: 45px;
  height: 45px;
  border-radius: 50% 50%;
  margin-left: 24rpx;
}

.avatarImg-upload {
  width: 45px;
  height: 45px;
  border-radius: 50% 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f4f5f7;
}

.sect-btn {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sect-btn view {
  width: 90%;
  height: 40px;
  color: #fff;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 60%;
  background-color: #32B499;
}
</style>
